<template>
	<view class="lunarCycle cycle">
		<view class="swiper-bg">
			<month-calendar />
		</view>
		<view class="swiper-box">
			<view class="top flex-r s-b">
				<view class="title">
					<view>
						2月
					</view>
					<text>2025年1月23日 22:34:59</text>
				</view>
				<view class="map flex-r a-c">
					<text class="iconfont icon-yueliang" />
					<text>月亮回归图</text>
					<text class="iconfont zuo icon-zuozuo" />
				</view>
			</view>
			<view class="unlock flex-r s-b a-c mt-2">
				<text>
					月度报告解锁
				</text>
				<view class="flex-r a-c">
					查看示例
					<text class="iconfont icon-zuozuo" />
				</view>
			</view>
			<view class="content">
				<view class="tips mb-1">
					情绪、安全感、内在需求、家庭关系。
				</view>
				<text>月亮回归与情绪、内在需求和安全感相关。<br />这是一个关注情感状态、内在需求和家庭关系的时机。月亮回归的能量适合进行情绪疗愈和内在反思。</text>
			</view>
			<view class="flex-c j-c a-c">
				<button class="video-btn flex-r a-c"><text class="iconfont icon-shipinbofang" />视频教程</button>
				<button class="unlock-btn mt-2">立即解锁</button>
			</view>
		</view>
		<view class="pl-2 pr-2">
			<button class="consult-btn">找咨询师1对1在线专业咨询</button>
		</view>
	</view>
</template>

<script setup>
	import monthCalendar from "./monthCalendar.vue"
</script>

<style lang="scss" scoped>
	.lunarCycle {}
</style>